import  { useState, useEffect } from 'react';

const TimerComponent = () => {
    const [time, setTime] = useState(new Date());
    const [color, setColor] = useState('black'); // 初始颜色为黑色

    useEffect(() => {
        // 设置定时器，每秒更新时间
        const timer = setInterval(() => {
            setTime(new Date());
        }, 1000);

        // 组件卸载时清除定时器
        return () => clearInterval(timer);
    }, []);

    useEffect(() => {
        // 每当颜色改变时，可以在这里执行一些额外的逻辑，例如记录日志或发送事件
        console.log(`颜色变为了: ${color}`);
    }, [color]); // 依赖颜色状态，颜色变化时这个 effect 将重新运行

    // 点击按钮切换颜色的函数
    const toggleColor = () => {
        setColor(prevColor => prevColor === 'black' ? 'red' : 'black');
    };

    return (
        <div>
            <p style={{ color: color }}>当前时间：{time.toLocaleTimeString()}</p>
            <button onClick={toggleColor}>切换颜色</button>
        </div>
    );
};

export default TimerComponent;
